<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      window.onload = function () {
        /* 
          点击按钮以后弹出一个内容
        */
        //获取按钮对象
        var btn01 = document.getElementById('btn01');

        /* 
          使用 对象.事件 = 函数的形式绑定响应函数
            它只能同时为一个元素的一个事件绑定一个响应函数
            不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的
        */

        //为btn01绑定一个单击响应函数
        // btn01.onclick = function () {
        //   alert(1);
        // };

        //为btn01绑定第二个单击响应函数
        // btn01.onclick = function () {
        //   alert(2);
        // };

        /* 
          addEventListener()
            - 通过这个方法也可以为元素绑定响应函数
            - 参数:
                1.事件的字符串,不要on
                2.回调函数,当事件触发时该函数会被调用。
                3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false

          使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
            这样当事件被触发时,响应函数将会安装函数的绑定顺序执行。
              先绑定的先执行,后绑定的后执行

          这个方法不支持IE8及以下的浏览器
        */
        // btn01.addEventListener(
        //   'click',
        //   function () {
        //     alert(1);
        //   },
        //   false
        // );

        // btn01.addEventListener(
        //   'click',
        //   function () {
        //     alert(2);
        //   },
        //   false
        // );

        // btn01.addEventListener(
        //   'click',
        //   function () {
        //     alert(3);
        //   },
        //   false
        // );

        /* 
          attacheEvent()
            - 在IE8中可以使用attachEvent()来绑定事件,
            - 参数:
              1.事件的字符串,要on
              2.回调函数

            - 这个方法也可以同时为一个事件绑定多个处理函数
                不同的是它是后绑定先执行,执行顺序和addEventListener()相反

        */
        btn01.attachEvent('onclick', function () {
          alert(1);
        });
        btn01.attachEvent('onclick', function () {
          alert(2);
        });
        btn01.attachEvent('onclick', function () {
          alert(3);
        });

        //定义一个函数,用来为指定元素绑定响应函数
        /* 
          addEventListener()中的this,是绑定事件的对象
          attachEvent()中的this,是window
            需要统一两个方法this
        */
        /* 
          参数:
            obj 要绑定事件的对象
            eventStr 事件的字符串(不要on)
            callback 回调函数
        */
        function bind(obj, eventStr, callback) {
          if (obj.addEventListener) {
            //大部分浏览器兼容的方式
            obj.addEventListener(eventStr, callback, false);
          } else {
            /* 
              this是谁由调用方式决定
              callback.call(obj); 修改函数的this
            */
            //IE8及以下
            obj.attachEvent('on' + eventStr, function () {
              //在匿名函数中调用回调函数
              callback.call(obj);
            });
          }
        }
      };
    </script>
  </head>
  <body>
    <button id="btn01">点我一下</button>
  </body>
</html>
